<template>
	<view class="wholepage">
		<pageheader :setting="settingdata"></pageheader>
		<view class="flexe" v-if="image.length>0">
			<image :src="image" mode="aspectFill" class="discernimg"></image>
			<view class="resultbox">
				<view class="boxone" v-for="(item,index) in list" :key="index">
					<image :src="item.baike_info.image_url" mode="aspectFill"></image>
					<view class="box_info">
						<text class="clamp1 name">{{item.name}}</text>
						<view class="opts">相似度<text>{{item.score}}%</text></view>
					</view>
					<navigator :url="'/chat/result?typeindex=0&searchKey='+item.name" hover-class="none" class="buyit">购买</navigator>
				</view>
			</view>
			<view class="backtodiscern" @click="recognition">返回继续识别</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '图片识别',
					bgColor: 'rgba(0,0,0,0.2)',
					titleColor: '#FFFFFF',
					showNav: true,
					showTypes: 0,
					position: "result",
				},
				list: [],
				// 前端显示图
				image: "",
				//地址
				url:"",
			}
		},
		onLoad(e) {
			_this = this
			_this.url = _this.$api.getbase()+"fileupload"
			_this.recognition()
		},
		methods: {
			recognition() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						let stop = 0
						uni.showLoading({
							title: "正在识别"
						});
						uni.uploadFile({
							url: _this.url, //仅为示例，非真实的接口地址
							filePath: chooseImageRes.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								let dataurl = JSON.parse(res.data).data
								_this.$api.get("aisearch", {imgpath:dataurl.url}).then(data => {
									uni.hideLoading();
									_this.list = data
									_this.image = dataurl.fullurl
								});
							},
							fail() {
								uni.hideLoading();
								uni.showToast({
									title: "识别失败",
									icon: "none"
								})
								setTimeout(function() {
									wx.navigateBack({
										delta: 1
									})
								}, 1000);
							}
						});
					},
					fail() {
						wx.navigateBack({
							delta: 1
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wholepage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000000;
		.flexe{
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
		}
		.discernimg {
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.resultbox {
			position: absolute;
			bottom: 268rpx;
			height: 200rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			overflow-x: auto;
			.boxone {
				&:last-child{
					margin-right: 60rpx;
				}
				margin-left: 60rpx;
				width: 630rpx;
				height: 100%;
				border-radius: 20rpx;
				background: rgba($color: #000000, $alpha: 0.5);
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.box_info {
					margin-left: 22rpx;
					display: flex;
					flex-direction: column;
					width: 238rpx;

					.name {
						color: #FFFFFF;
						font-size: 30rpx;
					}

					.opts {
						margin-top: 23rpx;
						color: #ffffff;
						font-size: 24rpx;
						color: #FFFFFF;

						text {
							color: #FFBA00;
						}
					}
				}

				.buyit {
					margin-left: 22rpx;
					width: 88rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					background: #38BE8C;
					color: #fff;
					border-radius: 20rpx;
					font-size: 28rpx;
				}
			}
		}

		.backtodiscern {
			width: 100%;
			height: 115rpx;
			background-color: rgba($color: #000000, $alpha: 0.9);
			text-align: center;
			line-height: 115rpx;
			color: #fff;
			font-size: 30rpx;
			position: absolute;
			bottom: 0;
		}
	}
</style>
